<style>
    .top{
        width: 100%;
        display: flex;
        margin-top: 20px;
        margin-bottom: 30px;
        text-align: center;
        .topconxtop{
            width: 25%;
            position: relative;

            .topcon{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                color: red;

                .row{
                    width: 25px;
                    height: 25px;
                    background: #fff;
                    border: 1px solid red;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 25px;
                    font-size: 16px;

                }
            }
            .xt{

                width: 100%;
                position: absolute;
                left: 104.8%;
                transform: translateX(-50%);
                top: 12.5px;
                height: 1px;
                background: red;
            }
            .topcon2{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                color: #CCC;

                .row{
                    width: 25px;
                    height: 25px;
                    background: #fff;
                    border: 1px solid #CCC;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 25px;
                    font-size: 16px;

                }
            }
            .xt2{

                width: 100%;
                position: absolute;
                left: 104.8%;
                transform: translateX(-50%);
                top: 12.5px;
                height: 1px;
                background: #CCC;
            }



        }






    }
    .detail_index{
        margin-left: 30px;
        margin-right: 30px;
    }
    .deliver-edit,.address-edit{
        float: right;
        width: 100px;
        text-align: center;
        background: red;
        color: #fff;
        margin-left: 10px;

    }
    .basic_index tr td{
        background: #fff;
    }
    .basic_index{
       text-align: center;
       margin-top: 20px;
       margin-bottom: 30px;
    }
    .basic_index_tr td{
        background: #ccc !important;
    }

</style>

<div class="top">

    <div class="topconxtop">
        <div class="topcon">
            <div class="row">
                1
            </div>
            <div style="margin-top: 6px">提交订单<br>{$row.order.createtime|date="Y-m-d H:i:s",###}
            </div>
        </div>
        <div class=" {if $row['order']['state'] >=2 } xt
            {else /}   xt2
          {/if}"></div>
    </div>
    <div class="topconxtop">
        <div class="  {if $row['order']['state'] >=2 } topcon
            {else /}   topcon2
          {/if} ">
            <div class="row">
                2
            </div>
            <div style="margin-top: 6px">已付款<br>{$row.order.paymenttime|date="Y-m-d H:i:s",###}

            </div>
        </div>
        <div class="   {if $row['order']['state'] >=3 } xt
              {else /}   xt2
            {/if} ">
        </div>
    </div>
    <div class="topconxtop">
        <div class=" {if $row['order']['state'] >=3 } topcon
            {else /}   topcon2
          {/if}">
            <div class="row">
                3
            </div>
            <div style="margin-top: 6px">店铺发货<br>{$row.order.delivertime|date="Y-m-d H:i:s",###}</div>
        </div>
        <div class=" {if $row['order']['state'] >=4 } xt
            {else /}   xt2
          {/if} "></div>
    </div>
    <div class="topconxtop">
        <div class=" {if $row['order']['state'] >=4 } topcon
            {else /}   topcon2
          {/if}">
            <div class="row">
                4
            </div>
            <div style="margin-top: 6px">用户收货<br>{$row.order.taketime|date="Y-m-d H:i:s",###}</div>
        </div>
        <div class=" {if $row['order']['state'] >=6 } xt
            {else /}   xt2
          {/if} "></div>
    </div>
    <div class="topconxtop">
        <div class=" {if $row['order']['state'] >=6 } topcon
            {else /}   topcon2
          {/if}">
            <div class="row">
                5
            </div>
            <div style="margin-top: 6px">订单完成<br> {$row.order.dealtime|date="Y-m-d H:i:s",###}</div>
        </div>
    </div>


</div>
<div class="clearfix"></div>  
<!--在这写-->

<div class="detail_index">
<div>
    基本信息 

    
    <a href="javascript:;" class="deliver-edit btn-disabled disabled " data-type="deliver" data-ids="{$row.id}">物流信息</a>
</div>
<div class="clearfix"></div>  

<table class="basic_index table table-bordered">
    <tr class="basic_index_tr">
        <td>订单状态</td>
        <td>收货状态</td>
        <td>售后状态</td>
        <td>订单编号</td>
        <td>用户昵称</td>
        <td>用户电话</td>
    </tr>
    <tr>
        <td>{$kuaidi.status|htmlentities}</td>
        <td>/</td>
        <td>/</td>
        <td>{$row.order.order_no|htmlentities}</td>
        <td>{$row.user.nickname|htmlentities}</td>
        <td>{$row.user.mobile|htmlentities}</td>
    </tr>
    <tr class="basic_index_tr">
        <td>支付方式</td>
        <td>下单门店</td>
        <td>订单类型</td>
        <td>配送方式</td>
        <td>物流单号</td>
        <td>收货时间</td>
    </tr>
    <tr>
        <td>已发货</td>
        <td>{$row.shop.shopname|htmlentities}</td>
        <td>商品</td>
        <td>RH000000082</td>
        <td>/</td>
        <td>{$row.order.taketime|date="Y-m-d H:i:s",###}</td>
    </tr>
</table>

<div>
    商品信息 

    
</div>
<div class="clearfix"></div>  

<table class="basic_index table table-bordered">
    <tr class="basic_index_tr">
        <td>序号</td>
        <td>图片</td>
        <td>名称</td>
        <td>规格</td>
        <td>数量</td>
        <td>商品编号</td>
        <td>单价</td>
        <td>应付金额</td>
        <td>运费</td>
        <td>小计</td>
        <td>实付金额</td>
    </tr>
    {volist name="row.info" id="item"  key="index" }
    <tr>
        <td>{$index}</td>
        <td><img src="{$item.image}"  width="80" >
            </td>
        <td>{$item.title}</td>
        <td>{$item.difference}</td>
        <td>{$item.number}</td>
        <td>{$item.goods_sku_sn}</td>
        <td>{$item.market_price}</td>
        <td>{$item.price}</td>
        <td>{$item.freight_price}</td>
        <td>{$item.actual_payment}</td>
        <td>{$item.actual_payment}</td>
    </tr>
   
    {/volist}
    
    
</table>
<div>
    收货人信息 

    <a href="javascript:;" class="address-edit  btn-disabled disabled " data-type="address" data-ids="{$row.id}">修改发货地址</a>
    
</div>
<div class="clearfix"></div>  

<table class="basic_index table table-bordered">
    <tr class="basic_index_tr">
        <td>收货人</td>
        <td>联系电话</td>
        <td>收货地址</td>
       
    </tr>
    <tr>
       
        <td>{$row.address.name|htmlentities}</td>
        <td>{$row.address.mobile|htmlentities}</td>
        <td>{$row.address.address|htmlentities}</td>
    </tr>
    
</table>
<div>
    付款明细 

    
</div>
<div class="clearfix"></div>  

<table class="basic_index table table-bordered">
    <tr class="basic_index_tr">
        <td>商品合计（元）</td>
        <td>运费（元）</td>
        <td>积分抵扣（元）</td>
        <td>优惠活动（元）</td>
        <td>折扣金额（元）</td>
        <td>优惠卷（元）</td>
        <td>应付小计金额（元）</td>
        <td>实付金额（元）</td>
    </tr>
    <tr>
        <td>200.00</td>
        <td>200.00</td>
        <td>200.00</td>
        <td>200.00</td>
        <td>200.00</td>
        <td>200.00</td>
        <td>200.00</td>
        <td>200.00</td>
    </tr>
    
</table>
</div>


